<!-- <template>
  <div class="app-container">
    <div
      style="
        width: 100%;
        height: 50px;
        background-color: #67c335;
        color: #fff;
        line-height: 50px;
        margin-bottom: 10px;
        font-size: 18px;
        padding-left: 20px;
      "
    >
      AQI空气质量指数超标趋势
    </div>
    <el-card shadow="never" class="table-container">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="order" label="序号" />
        <el-table-column label="月份">
          <template #default="scope">
            {{ scope.row.year }}-{{ scope.row.month }}
          </template>
        </el-table-column>
        <el-table-column prop="count" label="AQI空气质量指数超标数量" />
      </el-table>
    </el-card>
  </div>
</template> -->
<template>
  <div class="app-container">
    <div class="header">AQI空气质量指数超标趋势</div>
    <el-card shadow="never" class="table-container">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="order" label="序号" />
        <el-table-column label="月份">
          <template #default="scope">
            {{ scope.row.year }}-{{ scope.row.month }}
          </template>
        </el-table-column>
        <el-table-column prop="count" label="AQI空气质量指数超标数量" />
      </el-table>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import AqiAPI from "@/api/aqi";
import { ElMessage } from "element-plus";

const tableData: any = ref([]);

function reqTableList() {
  AqiAPI.getAqiTrendStatisticAllYearMonth().then((res) => {
    console.log(res);
    tableData.value = [];
    for (const v of res) {
      tableData.value.push(v);
    }
  });
}

onMounted(() => {
  reqTableList();
});
</script>

<style scoped>
.app-container {
  padding: 20px;
  font-family: "Arial", sans-serif;
  background-color: #f9f9f9; /* 接近白色的背景色 */
}

.header {
  width: 100%;
  height: 60px;
  background-color: #fff; /* 更淡的颜色 */
  color: #333; /* 深色文字以提高可读性 */
  line-height: 60px;
  padding-left: 20px;
  font-size: 20px;
  border-radius: 8px; /* 圆角边框 */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 轻微的盒子阴影 */
  margin-bottom: 20px; /* 与内容保持一定间距 */
}
</style>
